<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		vuex：Vuex就是专门给vue，提供的一个状态管理的大仓库
		Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
		它采用集中式存储管理应用的所有组件的状态，
		并以相应的规则保证状态以一种可预测的方式发生变化。
		
		作用：组件数据通信
		
		     数据缓存（前进后退，切换数据都不会丢失）
			 刷新，关闭页面，数据丢失
			 
			 localstorage  永久存在
			 sessionstorage  关闭页面
			 
			 
		安装：
		   1.vue create XXX 的时候，直接选中Vuex
		     src目录下会有一个文件夹store,store里面有index.js，
			 main.js导入store,并且挂载了
			 
		   2.vue create XXX 的时候，第一次未选中Vuex，后期想要添加Vuex
		     项目路径下：npm install vuex --save/yarn add vuex
			 src目录下不会有一个文件夹store，导入挂载，（需要自己从头创建）
		
		简单创建
		store index.js
		
		import Vue from "vue"
		import Vuex from "vuex"
		
		Vue.use(Vuex)
		
		const store=new Vuex.Store({
			
		})
		
		export default store;
		
		mian.js
		
		import store from "./store/index.js"//全写
		//import store from "./store"//导入的简写
		
		new Vue({
		  router,
		  store,//挂载
		  render: h => h(App)
		}).$mount('#app')
		
		5部分
		1. state 相当于vue  data
		
		const store=new Vuex.Store({
			state:{
				num:10
			}
		})
		
		组件使用：
		1.直接使用 {{this.$store.state.num}}----不建议
		2.计算属性 -----有缓存
		computed:{//缓存
			num(){
				return this.$store.state.num
			}
		}
		3.辅助函数
		import {mapState} from "vuex" //先导入辅助函数
		
		使用：数组 对象
		
		数组:
		computed:mapState(["num","str","flag"]) 名称要个vuex里面的一样不能改变
		
		对象：（修改原来的名称或进一步处理）
		computed:mapState({
			numa:state=>state.num,
			stra:"str",
			flaga(state){
				return state.flag?"ok":"no"
			}
		})
		
		//当前组件的计算属性与vuex的辅助函数共存
		computed:{
			...mapState(["num","str","flag"]),
			total(){
				return 102;
			}
		}
		
		2. Mutation 单项数据流，  只能通过Mutation(仓库管理员)来修改state
		   相当于methods,只能放同步方法
		
		const store=new Vuex.Store({
			state:{
				num:10,
				str:"hello",
				flag:true
			},
			mutations:{//要想修改state,必须通过Mutation
				//修改 num 的值
				changeNum(state,payload){//只有两个参数
				    console.log(payload);
					state.num+=payload.c;
				}
			}
		})
		
		组件:必须通过commit
		
		1. 通过commit使用
		methods:{
			add(){
				//调用 Mutation 必须通过 commit,只有两个参数
				//commit 第二个值，就是 payload 参数
				//this.$store.commit("changeNum",10);
				
				//传递多个参数---》对象
				this.$store.commit("changeNum",{a:10,b:20,c:30});
			}
		}
		
		2.辅助函数（数组和对象的区别同上）
		import {mapMutations} from "vuex" 导入辅助函数
		
		对象：
		<button @click="add({a:10,b:20,c:30})">点击按钮修改num</button>
		methods:{
			...mapMutations({
				add:'changeNum'
			})
	    }
		
		数组：
		<button @click="changeNum({a:10,b:20,c:30})">点击按钮修改num</button>
		methods:{
			...mapMutations(["changeNum"])
		}
		
		3. Action  相当于methods,来处理异步
		想要修改 state,必须通过mutation
		Action 可以通过commit 来调用 Mutation，Mutation来修改state的内容
		
		1. 组件：必须通过dispatch来调用Action
		
		<button @click="addN">每隔1000毫秒，修改n</button>
		
		methods:{
			addN(){//要想调用Action,必须通过dispatch
			   //第二个参数，是payload 参数，多个的时候对象
				this.$store.dispatch("asyncChangeN",100);
			}
		}
		
		2.辅助函数
		import {mapActions} from "vuex"
		
		对象：
		<button @click="addN(10)">每隔1000毫秒，修改n</button>
		methods:{
			...mapActions({
				addN:"asyncChangeN"
			})
		}
		
		数组：
		<button @click="asyncChangeN(50)">每隔1000毫秒，修改n</button>
		methods:{
			...mapActions(["asyncChangeN"])
		}
		
		4.Getter 相当于 vue计算属性+过滤器的结合体
		getters:{
			doarr(state){//方法，当做属性  
				return state.arr.filter(item=>{//过滤作用
					return item>=3
				});
			}
		}
		
		组件使用
		1.直接使用
		{{this.$store.getters.doarr}}---不建议
		
		2.计算属性里使用
		computed:{
			doarr(){
				return this.$store.getters.doarr
			}
		}
		
		3.辅助函数
		import {mapGetters} from "vuex"
		
		computed:{//数组
			...mapGetters(["doarr"])
		}
		
		computed:{//数组
			...mapGetters({
				arrA:"doarr"
			})
		}
		
		5. Module模块  如果仓库过大，就会拆分
		
		只有 state 合并的时候，会多模块的名称，其他的部分合并，会直接合并
		
		state,getter使用
		1.直接使用
		 {{this.$store.state.a.na}}---{{this.$store.getters.doarra}}
		
		2.计算属性
		computed:{
			  na(){
				  return this.$store.state.a.na
			  },
			  doarra(){
				  return this.$store.getters.doarra
			  }
		}
		
		mutation的使用
		1.commit
		methods:{
			add(){
				this.$store.commit("add")
			}
		}
		
		辅助函数***
		
		每个模块添加属性： namespaced: true (命名空间)
		
		import {mapState,mapGetters,mapMutations} from "vuex"
		
		使用：
		computed:{
			...mapState("a",["na"]),
			...mapState("b",{
				nnnb:"nb"
			}),
			...mapGetters("a",["doarra"]) 
		},
		methods:{
			...mapMutations("b",["add"])
		}
		
		
		辅助函数2：
		import { createNamespacedHelpers } from 'vuex'
		const { mapState, mapGetters } = createNamespacedHelpers('a')
		const { mapMutations } = createNamespacedHelpers('b')
		
		computed:{
			...mapState(["na"]),
			...mapGetters(["doarra"]) 
		},
		methods:{
			...mapMutations(["add"])
		}
		
		
		
		谈谈vuex的理解？
		1.先回答概念
		2.具体内容---5部分(单项数据流)
		3.工作中的应用
		4.作用、特色(单项数据流)
	</body>
</html>
